/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback } from "react";
import { Modal, Form, Select, Input, InputNumber } from "antd";
import { useSelector } from "dva";

const { Option } = Select;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 19 },
  },
};

const BalanceModal = ({
  type,
  form,
  visible,
  handleOpen = () => {},
  onSubmit = () => {},
  moneyInfo = {},
}) => {
  const { getFieldDecorator, validateFields, isFieldsTouched } = form;
  const {
    // 可提现金额
    withdrawable_money,
  } = moneyInfo || {};

  const { warning_balance, warning_status, phone, id } = useSelector(
    ({ account: { balanceWarningInfo = {} } = {} }) => balanceWarningInfo
  );
  const isFormChanged = isFieldsTouched();

  const handleSubmit = useCallback(
    () => {
      validateFields((err, values) => {
        if (err) return;
        const { phone = "" } = values;

        onSubmit({
          ...values,
          phone: phone.replace(/[\n,]/g, ",") || undefined,
          ...(type == "transfer" ? {} : { id }),
        });
        handleOpen(false);
      });
    },
    [handleOpen, id, onSubmit, type, validateFields]
  );

  return (
    <Modal
      destroyOnClose
      visible={visible}
      title={type == "transfer" ? "转入消费账户" : "余额预警"}
      onOk={handleSubmit}
      onCancel={() => handleOpen(false)}
      okButtonProps={{ disabled: !isFormChanged }}
    >
      <Form {...formItemLayout}>
        {type == "transfer" ? (
          <>
            <Form.Item label="金额">
              {getFieldDecorator("money", {
                rules: [
                  {
                    required: true,
                    message: "请输入转账金额",
                  },
                  {
                    validator: (rule, value, callback) => {
                      if (value > withdrawable_money) {
                        callback("可提现账户余额不足");
                        return;
                      }
                      if (value > 20000) {
                        callback("输入金额不能大于20000");
                        return;
                      }
                      callback();
                    },
                  },
                ],
              })(
                <InputNumber
                  precision={2}
                  style={{ width: "100%" }}
                  min={0.01}
                  formatter={value =>
                    value ? `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ""
                  }
                  parser={(value = "") => value.replace(/￥\s?|(,*)/g, "")}
                  placeholder="请输入转账金额"
                />
              )}
            </Form.Item>
            <p>1、该转入只能转入本平台的消费账户</p>
            <p>
              2、转入消费账户后，
              <span style={{ color: "red" }}>不可提现</span>
            </p>
            <p>
              3、最多可支持转账：
              <span style={{ color: "red" }}>20000</span>元
            </p>
          </>
        ) : (
          <>
            <Form.Item label="余额预警">
              {getFieldDecorator("warning_status", {
                initialValue: warning_status || "1",
              })(
                <Select>
                  <Option value="1">开启</Option>
                  <Option value="0">关闭</Option>
                </Select>
              )}
            </Form.Item>
            <Form.Item label="预警手机号">
              {getFieldDecorator("phone", {
                initialValue: phone && phone.replace(",", "\n"),
                rules: [
                  {
                    required: true,
                    message: "请预警手机号",
                  },
                ],
              })(<TextArea placeholder="请输入余额提醒手机号，多个手机号按回车分隔" />)}
            </Form.Item>
            <Form.Item label="余额预警">
              {getFieldDecorator("warning_balance", {
                initialValue: warning_balance,
                rules: [
                  {
                    required: true,
                    message: "请输入预警金额",
                  },
                ],
              })(
                <InputNumber
                  precision={2}
                  style={{ width: "100%" }}
                  min={0.01}
                  formatter={value =>
                    value ? `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ""
                  }
                  parser={(value = "") => value.replace(/￥\s?|(,*)/g, "")}
                  placeholder="请输入预警金额"
                />
              )}
            </Form.Item>
            <p style={{ color: "red" }}>
              开启余额预警后，当智慧管理平台提现账户+消费账号总金额小于设定的预警金额时，将向预警手机号发送预警短信，提醒充值（提醒短信0.04元/条，从资金账户扣除）
            </p>
          </>
        )}
      </Form>
    </Modal>
  );
};

export default Form.create()(BalanceModal);
